import React, {useEffect, useState} from 'react';
import {ProCard, ProForm, ProFormText} from '@ant-design/pro-components';
// @ts-ignore
import ProjectDetailTable from "@/pages/New/components/projectOverview/projectDetailTable";
import RecentProjects from "@/pages/New/components/projectOverview/recentProjects";
import MyUpload from "@/pages/New/components/projectOverview/uploadToOSS";
// @ts-ignore
import FindProject from "@/pages/New/components/projectOverview/findProject";
import CreateProject from "@/pages/New/components/projectOverview/createProject";
import ProjectDetailStore from "@/pages/New/redux/projectDetailStore";
// @ts-ignore
import {closeProjectDetailAction, showProjectDetailAction} from "@/pages/New/components/projectOverview/findProject";
import {DefaultRecentProject} from "@/pages/New/components/projectOverview/selfGeneratedDataConstant";
import {message} from "antd";

interface Project {
  companyJia: string,
  companyYi: string,
  contract: string,
  contractTime: [string, string],
  department: string,
  mangerName: string,
  projectName: string,
  projectType: string,
  isSupervise: string
}

export default () => {
  // 订阅newData
  const [newData, setNewData] = useState([])
  // 维护一个队列，先进先出
  const [projectQueue, setProjectQueue] = useState<Project[]>(DefaultRecentProject);

  const closeProjectDetail = (projectsDetail: any) => {
    ProjectDetailStore.dispatch(closeProjectDetailAction(projectsDetail));
  };

  const showProjectDetail = (projectsDetail: any) => {
    ProjectDetailStore.dispatch(showProjectDetailAction(projectsDetail));
  };

  ProjectDetailStore.subscribe(() => {
    setNewData(ProjectDetailStore.getState())
  })

  const create = (newProject: Project) => {
    console.log(newProject);
    let flag = true;

    projectQueue.map((project) => {
      if (project.contract === newProject.contract) {
        flag = false;
        return message.warning('该合同编号已存在');
      }
      if (project.projectName === newProject.projectName) {
        flag = false;
        return message.warning('该项目名称已存在');
      }
      return null;
    })

    // 创建失败
    if (!flag) {
      return;
    }

    // 创建成功
    if (projectQueue.length >= 4) {
      setProjectQueue(prevQueue => prevQueue.slice(0, projectQueue.length - 1));
    }
    // 当需要基于现有状态计算新的状态时，我们不能直接修改当前状态，而是要通过 setState 函数的 updater 函数来间接更新状态。
    // 其中 prevQueue 是在 setProjectQueue 更新状态时的一个临时变量，代表的是当前的状态值（即 projectQueue 的旧值）
    setProjectQueue(prevQueue => [newProject, ...prevQueue]);
    message.success('创建成功');
  }

  // console.log(projectQueue);

  return (
    <div>
      <ProCard gutter={16} style={{marginBlockStart: 8, display: 'flex', flexWrap: 'wrap'}}>
        <ProCard>
          <MyUpload/>
        </ProCard>
        <ProCard colSpan={4} layout="center" bordered style={{marginTop: "15px"}}>
          <CreateProject style={{fontSize: '80px'}} createProject={create}/>
        </ProCard>
        <ProCard colSpan={4} layout="center" bordered style={{marginTop: "15px"}}>
          <FindProject style={{fontSize: '80px'}} closeProjectDetail={closeProjectDetail}
                       showProjectDetail={showProjectDetail}/>
        </ProCard>
      </ProCard>
      <br/>
      <RecentProjects recentProjects={projectQueue}/>
      <br/>
      {/*将响应式数据newData传递给组件*/}
      <ProjectDetailTable newData={newData}/>
    </div>
  );
};
